<template>
  <div class="expert-achievements">
    <div class="banner">
      <div class="banner-content max-wrapper">
        <div class="banner-title">成果库</div>
        <div>
          <div class="banner-search">
            <div class="select">
              <el-select v-model="searchType" clearable>
                <el-option
                  v-for="item in searchOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="input">
              <el-input v-if="searchType != 'PubDate'" size="large" @keydown.enter="searchList" v-model="searchValue" placeholder="请输入内容" clearable>
                <template #suffix>
                  <el-icon @click="searchList">
                    <Search />
                  </el-icon>
                </template>
              </el-input>

              <el-date-picker
                v-if="searchType == 'PubDate'"
                @keydown.enter="searchList"
                v-model="searchValue"
                type="date"
                placeholder="请选择发布日期"
                style="height: 38px;"
                clearable
              />
              <el-icon @click="searchList" v-if="searchType == 'PubDate'" style="font-size: 24px; height: 38px; line-height: 38px; margin-right: 15px; color: #a8abb2;">
                <Search />
              </el-icon>
            </div>
          </div>

          <div class="expert-achievements-database">
            <el-checkbox
              v-model="checkAllAchievements"
              :indeterminate="isIndeterminate"
              @change="handleCheckAllChange"
              style="margin-right: 20px;"
              >全选</el-checkbox
            >
            <el-checkbox-group v-model="checkAchievements" @change="achievementsCheckChange">
              <el-checkbox label="CJFD" >期刊</el-checkbox>
              <el-checkbox label="CDFD">博士</el-checkbox>
              <el-checkbox label="CMFD">硕士</el-checkbox>
              <el-checkbox label="CPFD">中国会议</el-checkbox>
              <el-checkbox label="IPFD">国际会议</el-checkbox>
              <el-checkbox label="CCND">报纸</el-checkbox>
              <el-checkbox label="SCPD">中国专利</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </div>

    <div class="expert-achievements-main max-wrapper">
      <div class="expert-achievements-main-content max-wrapper">
        <div class="main-l">
          <div class="institution" v-if="themeFilter.list.length && themeFilter.more.length">
            <div class="common-title">主题</div>
            <div class="item-list" v-loading="themeLoading">
              <div v-show="!themeFilter.expand">
                <div @click="filterList(filterItem, 'theme')" v-for="(filterItem, filterIndex) in themeFilter.list" :key="filterIndex" :class="['info-item', filterTheme == filterItem.colValue ? 'active' : '']">
                  <span class="otw-1">{{ filterItem.colValue }}</span><span>({{ filterItem.cnt }})</span>
                </div>
              </div>
              
              <el-collapse-transition>
                <div v-show="themeFilter.expand">
                  <vxe-list :data="themeFilter.more" height="690" :scroll-y="{enabled: true}" auto-resize ref="themeListRef">
                    <template #default="{ items }">
                      <div :class="['info-item', filterTheme == filterItem.colValue ? 'active' : '']" @click="filterList(filterItem, 'theme')" v-for="(filterItem, filterIndex) in items" :key="filterIndex">
                        <span class="otw-1">{{ filterItem.colValue }}</span><span>({{ filterItem.cnt }})</span>
                      </div>
                    </template>
                  </vxe-list>
                </div>
              </el-collapse-transition>
              <div v-if="themeFilter.more.length > 0" @click="changeThemeExpand"
                :class="['all-expand', themeFilter.expand ? 'active' : '']">
                全部{{ themeFilter.expand ? '收起' : '展开' }}
                <el-icon>
                  <DArrowRight />
                </el-icon>
              </div>
            </div>
          </div>
          <div class="institution">
            <div class="common-title">年份</div>
            <div class="item-list" v-loading="yearLoading">
              <div v-show="!yearFilter.expand">
                <div @click="filterList(filterItem, 'year')"
                  v-for="(filterItem, filterIndex) in yearFilter.list" :key="filterIndex"
                  :class="['info-item', filterYear == filterItem.colValue ? 'active' : '']">
                  <span class="otw-1">{{ filterItem.colValue }}</span><span>({{ filterItem.cnt }})</span>
                </div>
              </div>
              <el-collapse-transition>
                <div v-show="yearFilter.expand">
                  <div @click="filterList(filterItem, 'year')"
                    v-for="(filterItem, filterIndex) in yearFilter.more" :key="filterIndex"
                    :class="['info-item', filterYear == filterItem.colValue ? 'active' : '']">
                    <span class="otw-1">{{ filterItem.colValue }}</span><span>({{ filterItem.cnt }})</span>
                  </div>
                </div>
              </el-collapse-transition>
              <div v-if="yearFilter.more.length > 0" @click="yearFilter.expand = !yearFilter.expand"
                :class="['all-expand', yearFilter.expand ? 'active' : '']">
                全部{{ yearFilter.expand ? '收起' : '展开' }}
                <el-icon>
                  <DArrowRight />
                </el-icon>
              </div>
            </div>
          </div>
        </div>

        <div class="main-r">
          <div class="opera-header">
            <div class="sort">
              <div @click="changeSort('Year')" :class="['sort-item', sortType == 'Year' ? 'sort-active' : '']">默认排序</div>
              <div @click="changeSort('PubDate')" :class="['sort-item', sortType == 'PubDate' ? 'sort-active' : '']">发表时间
                <el-icon :style="{ color: sortType == 'PubDate' ? '#AA2836' : '#D3D3D3' }">
                  <SortDown />
                </el-icon>
                <el-icon :style="{ color: sortType == 'PubDate' ? '#AA2836' : '#D3D3D3' }">
                  <SortUp />
                </el-icon>
              </div>
              <!-- <div @click="changeSort('PubDate')" :class="['sort-item', sortType == 'PubDate' ? 'sort-active' : '']">相关度排序</div> -->
            </div>
            <div>共 <span class="num">{{ dataAll }}</span> 条数据</div>
          </div>
          <div v-loading="listLoading" class="article-list">
            <div
              v-for="( articleItem, articleIndex ) in  expertAchievements"
              :key="articleIndex"
              class="article-item"
            >
              <div class="article-header">
                <div class="title otw-1">
                  <span
                    class="article-paper-name"
                  >
                    [{{ articleItem.sourceDatabase }}]
                  </span>

                  <span @click="goDetail(articleItem)" style="cursor: pointer;" :title="articleItem.title">{{ articleItem.title }}</span>
                </div>
                <!-- <div class="opera">
                  <el-icon>
                    <Share />
                  </el-icon>
                  <span style="margin-right: 20px;">导出</span>
                  <el-icon>
                    <Position />
                  </el-icon>
                  <span>分享</span>
                </div> -->
              </div>
              <div class="desc">
                <p class="otw-1">
                  <span class="article-author">{{ articleItem.author }}</span>
                  <span>{{ format(articleItem.pubDate) }}</span>
                </p>
                <div class="otw-2">{{ articleItem.theme }}</div>
              </div>
              <div class="article-other">
                <!-- <div>
                  {{ articleItem[fieldConfigs(articleItem.tableName)['articleKeywords']] ? '关键词：' + articleItem[fieldConfigs(articleItem.tableName)['articleKeywords']].split(';;').join("，") : '' }}
                </div> -->
                <!-- <div class="other-num">
                  被引：<span style="margin-right: 10px;">{{ articleItem.citedFrequency ?? 0 }}</span> 下载频次：<span>{{ articleItem.downloadFrequency ?? 0 }}</span>
                </div> -->
              </div>
              
            </div>
            <div class="pagination">
              <el-pagination
                :total="dataAll"
                v-model:current-page="currentPage"
                :page-size="pageSize"
                @current-change="currentPageChange"
                prev-text="上一页"
                next-text="下一页"
                layout="prev, pager, next" background
              />
            </div>
          </div>
          
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default { name: 'frontExpertAchievements' }
</script>
<script setup>
import { ref, computed } from 'vue';
import { useSystemStore } from '@/stores/modules/system.js';
import { Search, DArrowRight, SortDown, SortUp, Share, Position } from '@element-plus/icons-vue'
import { http } from '@/utils/http/index.js'
import { ElMessage } from 'element-plus';
import { useAuthStore } from '@/stores/modules/auth.js';
import { format } from '@/plugins/moment.js'
import { extractText, showExpertAvator, getImageUrl } from '@/utils/index.js'
import {VxeList} from 'vxe-table'
import 'vxe-table/lib/style.css'
import axios from 'axios';

const systemStore = useSystemStore()

const authStore = useAuthStore()

/**设置头部 */
systemStore.headerType = 'platform_black'
systemStore.headerBgcolor = 'normal'
systemStore.headerFontColor = '0'
systemStore.headerWidthType = 'max'

/* 所选成果库 */
const checkAllAchievements = ref(false)
const isIndeterminate = ref(true)
const checkAchievements = ref(["CJFD"])
const achievementsList = ["CJFD", "CDFD", "CMFD", "CPFD", "IPFD", "CCND", "SCPD"]

/* 切换成果库 */
const handleCheckAllChange = (val) => {
  checkAchievements.value = val ? achievementsList : []
  queryParams.achievementsCodeArr = checkAchievements.value
  isIndeterminate.value = false
  currentPage.value = 1
  queryParams.theoryStudyGetListAndPageInfoInput.pageIndex = 1
  /* getGroupByYear()
  getGroupByTheme() */
  getGroupInfo()
  getList()
}
const achievementsCheckChange = (val) => {
  queryParams.achievementsCodeArr = val
  currentPage.value = 1
  queryParams.theoryStudyGetListAndPageInfoInput.pageIndex = 1

  const checkedCount = val.length
  checkAllAchievements.value = checkedCount == achievementsList.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < achievementsList.length
  /* getGroupByYear()
  getGroupByTheme() */
  getGroupInfo()
  getList()
}

const listLoading = ref(false)

/* 成果列表 */
const expertAchievements = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const dataAll = ref(0)

/* 查询参数 */
const queryParams = {
  achievementsCodeArr: checkAchievements.value,
  theoryStudyGetListAndPageInfoInput: {
    pageIndex: currentPage.value,
    pageSize: pageSize.value,
    authToken: authStore.auth_token,
    orderbyCol: "Year",
    dfi: {},
  },
}

/* 切换页码 */
const currentPageChange = (val) => {
  currentPage.value = val
  queryParams.theoryStudyGetListAndPageInfoInput.pageIndex = val
  getList()
}

/**右侧排序 */
const sortType = ref("Year")
const changeSort = (type) => {
  sortType.value = type
  currentPage.value = 1
  queryParams.theoryStudyGetListAndPageInfoInput.pageIndex = 1
  queryParams.theoryStudyGetListAndPageInfoInput.orderbyCol = type
  getList()
}

/* 成果类型分组信息 */
const themeListRef = ref(null)
const themeLoading = ref(false)
const themeFilter = ref({ list: [], more: [], expand: false })
const yearLoading = ref(false)
const yearFilter = ref({ list: [], more: [], expand: false })

const getGroupByYear = () => {
  let params = {
    groupbyCol: "Year",
    achievementsCodeArr: checkAchievements.value,
    theoryStudyGetListAndPageInfoInput: {
      authToken: authStore.auth_token,
      pageIndex: 1,
      pageSize: 20,
      orderbyCol: "Year",
      dfi: {}
    }
  }
  if ( !params.achievementsCodeArr.length ) return
  yearLoading.value = true
  http.$POST('/Achievements/GetAchievementsGroupInfo', params).then(res => {
    yearLoading.value = false
    if (res.isError) return
    const temp = res.result
    let list = []
    let more = []
    if (temp.length > 6) {
      list = res.result.slice(0, 6)
      more = res.result
    } else {
      list = temp
    }
    yearFilter.value.list = list
    yearFilter.value.more = more
  })
}

const getGroupByTheme = () => {
  let params = {
    groupbyCol: "Theme",
    achievementsCodeArr: checkAchievements.value,
    theoryStudyGetListAndPageInfoInput: {
      authToken: authStore.auth_token,
      pageIndex: 1,
      pageSize: 20,
      orderbyCol: "",
      dfi: {}
    }
  }
  if ( !params.achievementsCodeArr.length ) return
  themeLoading.value = true
  http.$POST('/Achievements/GetAchievementsGroupInfo_Theme', params, { timeout: 150000 }).then(res => {
    themeLoading.value = false
    if (res.isError) return
    const temp = res.result
    let list = []
    let more = []
    if (temp.length > 6) {
      list = res.result.slice(0, 6)
      more = res.result
    } else {
      list = temp
    }
    themeFilter.value.list = list
    themeFilter.value.more = more
  })
}

/* getGroupByYear()
getGroupByTheme() */

const getGroupInfo = () => {
  let params = {
    groupbyCol: ["Year", "Theme"],
    achievementsCodeArr: checkAchievements.value,
    theoryStudyGetListAndPageInfoInput: {
      authToken: authStore.auth_token,
      pageIndex: 1,
      pageSize: 500,
      orderbyCol: "",
      dfi: {}
    }
  }
  if ( !params.achievementsCodeArr.length ) return
  themeLoading.value = true
  yearLoading.value = true
  http.$POST('/Achievements/GetAchievementsGroupInfo', params).then(res => {
    themeLoading.value = false
    yearLoading.value = false
    if(res.isError) return
    const temp = res.result[0]
    let list = []
    let more = []
    if (temp.length > 6) {
      list = res.result[0].slice(0, 6)
      more = res.result[0]
    } else {
      list = temp
    }
    yearFilter.value.list = list
    yearFilter.value.more = more

    const themeTemp = res.result[1]
    let themeList = []
    let themeMore = []
    if (themeTemp.length > 6) {
      themeList = res.result[1].slice(0, 6)
      themeMore = res.result[1]
    } else {
      themeList = themeTemp
    }
    themeFilter.value.list = themeList
    themeFilter.value.more = themeMore
  })
}

getGroupInfo()


const filterTheme = ref('')
const filterYear = ref('')
const filterList = (filter, field) => {

  if(field == 'theme') {
    if(filterTheme.value == filter.colValue) {
      filterTheme.value = ""
    } else {
      filterTheme.value = filter.colValue
    }
  } else {
    if(filterYear.value == filter.colValue) {
      filterYear.value = ""
    } else {
      filterYear.value = filter.colValue
    }
  }

  currentPage.value = 1
  queryParams.theoryStudyGetListAndPageInfoInput.pageIndex = 1
  getList()
}

const changeThemeExpand = () => {
  if(themeFilter.value.expand) {
    themeListRef.value.clearScroll()
  }
  themeFilter.value.expand = !themeFilter.value.expand
}

/**搜索框 */
const searchValue = ref('')
const searchType = ref('Title')
const searchOptions = ref([
  { value: 'Title', label: '标题' },
  { value: 'Author', label: '作者' },
  /* { value: 'PubDate', label: '发布日期' }, */
])
const searchList = () => {
  currentPage.value = 1
  queryParams.theoryStudyGetListAndPageInfoInput.pageIndex = 1
  getList()
}

const getList = () => {
  if ( !queryParams.achievementsCodeArr.length ) return ElMessage.warning("请至少选择一个成果库进行查询")
  listLoading.value = true

  const dfi = {
    logic: 0,
    filters: [],
  }

  /* 是否有搜索值 */
  if(searchType.value && searchValue.value) {
    dfi.filters.push({
      field: searchType.value,
      operator: searchType.value == 'PubDate' ? 8 : 0,
      value: searchValue.value
    })
  }

  /* 是否选择了主题 */
  if(filterTheme.value) {
    dfi.filters.push({
      field: 'theme',
      operator: 0,
      value: filterTheme.value
    })
  }

  /* 是否选择了年份 */
  if(filterYear.value) {
    dfi.filters.push({
      field: 'year',
      operator: 8,
      value: filterYear.value
    })
  }

  if(dfi.filters.length) {
    queryParams.theoryStudyGetListAndPageInfoInput.dfi = dfi
  }
  http.$POST("/Achievements/GetAchievementsInfoList", queryParams ).then(res => {
    listLoading.value = false
    if(res.isError) return ElMessage.warning("查询失败")
    expertAchievements.value = res.result.dataLst
    dataAll.value = res.result.countAll
  }).catch(() => {
    listLoading.value = false
    expertAchievements.value = []
    dataAll.value = 0
  })
}

getList()

/* 跳转详情 */
const goDetail = (row) => {
  const myhost = "https://elib.cnki.net"
  const actionurl = "https://wh.cnki.net/article/cjfttotal/TN201"

  // https://hydev.cnki.net/klogin/request/login.ashx?act=login&uid=WEEvREdxOWJmbC9oM1NjYkZCcHpMblhxM0NzdUNwVDNseWVBUlgweFkyK0c=$R1yZ0H6jyaa0en3RxVUd8df-oHi7XMMDo7mtKT6mSmEvTuk11l2gFA!!&jsonp=jQuery112405142783522306882_1706584318906

  /* const url = `/cnkiAchievements/klogin/request/login.ashx?act=login&uid=WEEvREdxOWJmbC9oM1NjYkZCcHpMblhxM0NzdUNwVDNseWVBUlgweFkyK0c=$R1yZ0H6jyaa0en3RxVUd8df-oHi7XMMDo7mtKT6mSmEvTuk11l2gFA!!&jsonp=jQuery112405142783522306882_1706584318906` */

  const url = `/cnkiAchievements/Facade/FacadeLogin.aspx?action=login&p=${actionurl}&ep=${actionurl}`

  axios.defaults.withCredentials = true;
  

  axios.post(url, { username: "liuxuejun110193", password: "dzzsck057" }).then(res => {
    console.log(res)

    window.open(`https://hydev.cnki.net/KCMS/detail/detail.aspx?dbcode=${row.tableName}&dbname=${row.dbName ? row.dbName.slice(0, -1) : ''}&filename=${row.fileName}`)
  })
  /* window.open(`/expert-achievements/achievements-details?id=${row.uniqueId}&code=${row.tableName}`) */
}
</script>

<style lang='scss' scoped>
@import '@/assets/styles/variables.scss';

.expert-achievements {
  min-width: 1626px;
  width: 100%;
  font-family: PingFang SC-Regular, PingFang SC;
  background-color: #F8F8F8;

  .banner {
    width: 100%;
    min-width: $maxWrapper;
    height: 300px;
    background-image: url(@/assets/images/front/xuanchuan_banner.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .banner-content {
      display: flex;
      height: 100%;
      padding-top: 94px;
    }

    .banner-title {
      display: inline-block;
      font-size: 45px;
      font-family: Source Han Serif CN, Source Han Serif CN;
      color: #FFFFFF;
      letter-spacing: 10px;
      text-shadow: 0px 3px 6px #000000;
      -webkit-text-stroke: 1px #FFFFFF;
      margin-right: 230px;
    }

    .banner-search {
      width: 1020px;
      height: 55px;
      background-color: #fff;
      border-radius: 2px;
      display: inline-flex;
      align-items: center;

      .select {
        width: 104px;
        &:deep(.el-select .el-input__wrapper.is-focus) {
          box-shadow: none !important;
        }
        &:deep(.el-input__wrapper) {
          border-radius: 0;
          box-shadow: none;
          border-right: 1px solid #ccc;
        }
        &:deep(.el-select .el-input.is-focus .el-input__wrapper) {
          box-shadow: none !important;
        }
      }

      .input {
        flex: 1;
        display: flex;

        &:deep(.el-input) {
          width: 100%;

          .el-input__wrapper {
            box-shadow: none;
          }

          .el-icon {
            cursor: pointer;
            font-size: 24px;
          }
        }

      }
    }
  }

  .expert-achievements-database{
    margin-bottom: 28px;
    display: flex;

    :deep(.el-checkbox) {
      color: #FAFAFF;
      font-size: 16px;
      font-family: MicrosoftYaHei, MicrosoftYaHei;
      --el-checkbox-checked-text-color: #FAFAFF;
      --el-checkbox-checked-input-border-color: rgba(255,255,255,0.24);
      --el-checkbox-checked-bg-color: #FFFFFF;
      --el-checkbox-bg-color: rgba(255,255,255,0.24);
      --el-checkbox-checked-icon-color: #A42635;
    }
    :deep(.el-checkbox__inner::after) {
      border-width: 2px;
    }
  }

  .expert-achievements-main {
    position: relative;
    top: -67px;
  }

  .expert-achievements-main-content {
    display: flex;
    gap: 7px;

    .main-l {
      width: 270px;
      margin-right: 40px;

      .common-title {
        font-family: 微软雅黑;
        height: 55px;
        font-size: 18px;
        font-weight: normal;
        color: #AA2836;
        display: flex;
        align-items: center;
        padding: 0 25px;
        background-color: #FCFAFA;
        border-bottom: 1px solid #E7E7E7;
      }

      .item-list {
        max-height: 750px;
        overflow: auto;
      }

      .info-item {
        font-family: 微软雅黑;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 25px;
        height: 55px;
        border-right: 3px solid transparent;

        &.active {
          background-color: #edecec;
          border-right-color: var(--theme-color);
        }

        span {
          font-size: 14px;
          color: #333333;

          &:first-child {
            width: 68%;
          }

          &:last-child {
            width: 26%;
            text-align: right;
          }
        }
      }

      .all-expand {
        user-select: none;
        font-size: 16px;
        font-weight: 400;
        color: #AA2836;
        padding: 14px 25px;
        text-align: center;
        cursor: pointer;
        position: sticky;
        background-color: #fff;
        bottom: 0;

        .el-icon {
          transform: rotate(90deg);
          vertical-align: middle;
          transition: all .3s;
        }

        &.active {
          .el-icon {
            transform: rotate(-90deg);
          }
        }
      }

      .institution {
        border: 1px solid #E7E7E7;
        background-color: #fff;
        margin-bottom: 22px;
      }
    }

    .main-r {
      flex: 1;
      background: #FFFFFF;
      padding: 0 15px 18px;

      .opera-header {
        padding-left: 8px;
        height: 55px;
        /* background: #fff; */
        border-bottom: 1px solid #EFEFEF;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: MicrosoftYaHei-, MicrosoftYaHei;

        .sort {
          display: flex;
          gap: 36px;

          .sort-item {
            user-select: none;
            font-size: 14px;
            font-weight: 400;
            color: #333333;
            cursor: pointer;

            &.sort-active {
              color: #AA2836;
              font-weight: bold;
            }

            .el-icon {
              vertical-align: middle;

              &:last-child {
                margin-left: -8px;
              }
            }
          }
        }

        .num {
          font-size: 14px;
          font-weight: normal;
          color: #AA2836;
        }
      }

      .article-list {
          min-height: 360px;
          /* background-color: #fff; */
          /* padding: 23px 15px 18px; */

          .article-item {
            padding: 20px 16px;
            border-bottom: 1px solid #EFEFEF;

            .article-header {
              display: flex;
              margin-bottom: 5px;

              .article-paper-name{
                color: #A82735;
                margin-right: 8px;
              }

              .title {
                font-size: 16px;
                font-weight: bold;
                color: #333333;
                width: 86%;
              }

              .opera {
                flex: 1;
                width: 0;
                text-align: right;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                color: #333;
                font-weight: bold;
                user-select: none;

                .el-icon,
                span {
                  cursor: pointer;
                  color: #4B4B4B;
                }

                .el-icon {
                  margin-right: 4px;

                }
              }
            }

            .article-author{
              color: #92A9D3;
              margin-right: 16px;
            }

            .desc {
              font-size: 16px;
              font-weight: 400;
              color: #7C7C7C;
              line-height: 24px;
            }

            .article-other{
              display: flex;
              justify-content: space-between;
              align-items: center;
            }

            .other-num {
              margin-top: 7px;
              color: #7C7C7C;
              font-weight: bold;
              flex: 1;
              display: flex;
              justify-content: flex-end;

              span {
                color: var(--theme-color);
                font-weight: bold;
              }
            }
          }
        }

      .pagination {
        margin: 71px 0 10px;

        :deep(.el-pagination) {
          justify-content: center;
        }
      }
    }
  }
}
</style>